<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CRUD Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
    <script src="../dist/cl-crud.min.js"></script>
    <style>
        html,
        body,
        #app {
            height: 100%;
            width: 100%;
        }

        #app {
            padding: 10px;
            box-sizing: border-box;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .cl-crud th {
            background-color: #fdfdfd !important;
        }

        .cl-crud th .cell {
            font-weight: normal;
            color: #666;
        }

        .el-tabs,
        .el-tab-pane {
            height: 100%;
        }

        .el-tabs__header {
            margin-bottom: 0;
        }

        .el-tabs__content {
            height: calc(100% - 42px);
            border: 1px solid #eee;
            border-top: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-tabs type="card" lazy v-model="tabs.active" @tab-click="onTabClick">
            <el-tab-pane name="a" label="列表 A">
                <cl-crud name="a" @load="onLoadA" @fullscreen="onFullscreen" @resize="onResize">
                    <template #table-column-images="{scope}">
                        <el-image :src="scope.row.images[0]" :preview-src-list="scope.row.images" :style='{
                                    height: "60px",
                                    width: "60px"
                                }'></el-image>
                    </template>

                    <template #slot-append="{scope}">
                        <el-button size="mini" type="text" @click="openForm_CRUD">内嵌crud</el-button>
                    </template>

                    <template #slot-validate="{scope}">
                        <el-form-item v-for="(item, index) in scope.vads" :key="index" :prop="'vads.' + index + '.val'"
                            :rules="{ required: true }">
                            <el-input v-model="item.val"></el-input>
                        </el-form-item>

                        <el-button @click="addVad(scope.vads)">添加行</el-button>
                    </template>

                    <template #slot-fn>
                        <el-button @click="submit" size="small">submit</el-button>
                        <el-button @click="getForm" size="small">getForm</el-button>
                        <el-button @click="hiddenItem" size="small">hiddenItem</el-button>
                    </template>

                    <template #slot-hdr-btn>
                        <el-button size="mini" round>自定义按钮</el-button>
                    </template>
                </cl-crud>
            </el-tab-pane>

            <el-tab-pane name="b" label="列表 B">
                <cl-crud name="b" @load="onLoadB">
                    <template #slot-append="{scope}">
                        <el-button size="mini" type="text" @click="openForm_CRUD">内嵌crud</el-button>
                    </template>
                </cl-crud>
            </el-tab-pane>
        </el-tabs>

        <cl-form ref="cl-form"> </cl-form>
    </div>

    <script>
        const userList = [
            {
                id: 1,
                name: '刘一',
                process: 42.2,
                endTime: '2019年09月02日',
                price: 75.99,
                salesRate: 52.2,
                salesStatus: 1,
                images: [
                    'https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/1.jpg',
                ],
                children: [
                    {
                        id: 6,
                        name: '刘一儿子',
                        process: 35.2,
                        endTime: '2019年09月05日',
                        price: 242.1,
                        salesRate: 72.1,
                        salesStatus: 1,
                        images: [],
                    },
                ],
            },
            {
                id: 2,
                name: '陈二',
                process: 35.2,
                endTime: '2019年09月05日',
                price: 242.1,
                salesRate: 72.1,
                salesStatus: 1,
                images: [
                    'https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/2.jpg',
                ],
            },
            {
                id: 3,
                name: '张三',
                process: 10.2,
                endTime: '2019年09月12日',
                price: 74.11,
                salesRate: 23.9,
                salesStatus: 0,
                images: [
                    'https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/3.jpg',
                ],
            },
            {
                id: 4,
                name: '李四',
                process: 75.5,
                endTime: '2019年09月13日',
                price: 276.64,
                salesRate: 47.2,
                salesStatus: 0,
                images: [
                    'https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/4.jpg',
                ],
            },
            {
                id: 5,
                name: '王五',
                process: 25.4,
                endTime: '2019年09月18日',
                price: 160.23,
                salesRate: 28.3,
                salesStatus: 1,
                images: [
                    'https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/5.jpg',
                ],
            },
        ];

        Vue.use(CRUD, {
            crud: {
                table: {
                    op: {
                        // name: 'dropdown-menu', // 下拉模式

                        ['dropdown-menu']: {
                            width: '160px',
                        },
                    },
                },
                fn: {
                    permission() {
                        return Promise.resolve({
                            add: false,
                            update: false,
                            delete: false,
                        });
                    },
                },
            },
            components: {
                printBtn: {
                    methods: {
                        printls() {
                            console.log(this.$crud.app.getData('table.data'));
                        },
                    },

                    render(h) {
                        return h(
                            'el-button',
                            {
                                props: {
                                    size: 'mini',
                                },
                                on: {
                                    click: () => {
                                        this.printls();
                                    },
                                },
                            },
                            '打印列表（插件 · 组件注入）'
                        );
                    },
                },
            },
        });

        new Vue({
            el: '#app',

            data() {
                return {
                    vad: {
                        list: [],
                    },
                    crud1: null,
                    crud2: null,
                    tabs: {
                        active: 'a',
                        list: [
                            {
                                label: '列表A',
                                value: 'a',
                            },
                            {
                                label: '列表B',
                                value: 'b',
                            },
                        ],
                    },
                };
            },

            methods: {
                onTabClick(a) {
                    this.$nextTick(() => {
                        this.crud1.doLayout('table');
                        this.crud2.doLayout('table');
                    });
                },

                onFullscreen(v) {
                    console.log('是否全屏', v);
                },

                onResize({ tableMaxHeight }) {
                    console.log('table-max-height', tableMaxHeight + 'px');
                },

                onLoadA({ ctx, app }) {
                    this.crud1 = app;

                    ctx.service({
                        page: (p) => {
                            console.log('GET[page]', p);
                            return Promise.resolve({
                                list: userList,
                                pagination: {
                                    page: 1,
                                    size: 20,
                                    total: 5,
                                },
                            });
                        },
                        info: (d) => {
                            console.log('GET[info]', d);
                            return new Promise((resolve) => {
                                resolve(d);
                            });
                        },
                        add: (d) => {
                            console.log('POST[add]', d);
                            return Promise.resolve();
                        },
                        delete: (d) => {
                            console.log('POST[delete]', d);
                            return Promise.resolve();
                        },
                        update: (d) => {
                            console.log('POST[update]', d);
                            return Promise.resolve();
                        },
                    })
                        .set('permission', () => {
                            return {
                                add: true,
                                update: true,
                                delete: true,
                            };
                        })
                        .set('table', {
                            columns: [
                                {
                                    type: 'selection',
                                    align: 'center',
                                    width: 60,
                                },
                                {
                                    label: '图片',
                                    prop: 'images',
                                    align: 'center',
                                    width: '200',
                                },
                                {
                                    label: '花名',
                                    prop: 'name',
                                    align: 'center',
                                },
                                {
                                    label: '统计',
                                    prop: 'name',
                                    align: 'center',
                                    children: [
                                        {
                                            label: '进展',
                                            prop: 'process',
                                            align: 'center',
                                        },
                                        {
                                            label: '总量',
                                            prop: 'price',
                                            align: 'center',
                                        },
                                        {
                                            label: '销售',
                                            prop: 'salesRate',
                                            align: 'center',
                                        },
                                    ],
                                },
                                {
                                    label: '最后期限',
                                    prop: 'endTime',
                                    align: 'center',
                                    sortable: true,
                                },
                            ],

                            op: {
                                props: {
                                    width: 250,
                                },

                                layout: [
                                    'slot-append',
                                    'edit',
                                    'delete',
                                    ({ scope, h }) => {
                                        return h(
                                            'el-button',
                                            {
                                                props: {
                                                    size: 'mini',
                                                    type: 'text',
                                                },
                                                on: {
                                                    click() {
                                                        alert(scope.row.name);
                                                    },
                                                },
                                            },
                                            '点击我'
                                        );
                                    },
                                ],
                            },

                            on: {
                                'selection-change'(selection) {
                                    console.log(selection);
                                },
                            },
                        })
                        .set('upsert', {
                            sync: false,
                            props: {
                                labelWidth: '150px',
                            },
                            op: {
                                inPage: true,
                                layout: ['slot-fn', 'cancel', 'confirm'],
                            },
                            hdr: {
                                layout: ['slot-hdr-btn', 'flex1', 'fullscreen', 'close'],
                            },
                            items: [
                                {
                                    prop: 'vads',
                                    value: [],
                                    label: '动态增减表单验证',
                                    component: {
                                        name: 'slot-validate',
                                    },
                                },
                                {
                                    label: '数字框',
                                    prop: 'a',
                                    component: {
                                        name: 'el-input-number',
                                    },
                                },
                                {
                                    label: '输入框',
                                    prop: 'b',
                                    hidden: false,
                                    component: {
                                        name: 'el-input',
                                        attrs: {
                                            placeholder: '请输入关键字',
                                        },
                                    },
                                },
                                {
                                    label: '下拉选择',
                                    prop: 'c',
                                    value: [1, 2],
                                    component: {
                                        name: 'el-select',
                                        props: {
                                            multiple: true,
                                        },
                                        options: [
                                            {
                                                label: '选项1',
                                                value: 1,
                                            },
                                            {
                                                label: '选项2',
                                                value: 2,
                                            },
                                        ],
                                    },
                                },
                                {
                                    label: '时间',
                                    prop: 'd',
                                    component: {
                                        name: 'el-date-picker',
                                    },
                                },
                                {
                                    label: '多选',
                                    prop: 'e',
                                    value: [1],
                                    component: {
                                        name: 'el-checkbox-group',
                                        options: [
                                            {
                                                label: '选项1',
                                                value: 1,
                                            },
                                            {
                                                label: '选项2',
                                                value: 2,
                                            },
                                        ],
                                    },
                                },
                            ],
                        })
                        .set('search', {
                            adv: {
                                items: [
                                    {
                                        label: '输入框',
                                        prop: 'a',
                                        hidden: false,
                                        component: {
                                            name: 'el-input',
                                            attrs: {
                                                placeholder: '请输入关键字',
                                            },
                                        },
                                    },
                                    {
                                        label: '下拉选择',
                                        prop: 'b',
                                        value: [1, 2],
                                        component: {
                                            name: 'el-select',
                                            props: {
                                                multiple: true,
                                            },
                                            options: [
                                                {
                                                    label: '选项1',
                                                    value: 1,
                                                },
                                                {
                                                    label: '选项2',
                                                    value: 2,
                                                },
                                            ],
                                        },
                                    },
                                    {
                                        label: '时间',
                                        prop: 'c',
                                        component: {
                                            name: 'el-date-picker',
                                        },
                                    },
                                    {
                                        label: '多选',
                                        prop: 'd',
                                        value: [1],
                                        component: {
                                            name: 'el-checkbox-group',
                                            options: [
                                                {
                                                    label: '选项1',
                                                    value: 1,
                                                },
                                                {
                                                    label: '选项2',
                                                    value: 2,
                                                },
                                            ],
                                        },
                                    },
                                ],
                            },

                            query: {
                                list: [
                                    {
                                        label: '类目1',
                                        value: 1,
                                    },
                                    {
                                        label: '类目2',
                                        value: 0,
                                    },
                                ],
                            },
                        })
                        .set('layout', [
                            [
                                'refresh-btn',
                                'add-btn',
                                'multi-delete-btn',
                                'print-btn',
                                'query',
                                'flex1',
                                'search-key',
                                'adv-btn',
                            ],
                            ['data-table'],
                            ['flex1', 'pagination'],
                        ])
                        .on('info', (data, { next }) => {
                            setTimeout(() => {
                                next(data);
                            }, 300);
                        })
                        .on('open', (isEdit, data) => {
                            console.log('\n【打开窗口】');
                            console.log(`是否编辑`, isEdit);
                            console.log(`表单参数`, data);
                        })
                        .on('advReset', (data, { close }) => {
                            console.log(data);
                            close();
                        })
                        .done();

                    app.refresh();
                },

                onLoadB({ ctx, app }) {
                    this.crud2 = app;

                    ctx.service({
                        page: (p) => {
                            console.log('GET[page]', p);
                            return Promise.resolve({
                                list: userList,
                                pagination: {
                                    page: 1,
                                    size: 20,
                                    total: 5,
                                },
                            });
                        },
                        info: (d) => {
                            return new Promise((resolve) => {
                                resolve(d);
                            });
                        },
                        add: (d) => {
                            return Promise.resolve();
                        },
                        delete: (d) => {
                            return Promise.resolve();
                        },
                        update: (d) => {
                            return Promise.resolve();
                        },
                    })
                        .set('permission', () => {
                            return {
                                add: true,
                                update: true,
                                delete: true,
                            };
                        })
                        .set('table', {
                            columns: [
                                {
                                    type: 'index',
                                    label: '#',
                                    align: 'center',
                                },
                                {
                                    label: '花名',
                                    prop: 'name',
                                    align: 'center',
                                },
                                {
                                    label: '进展',
                                    prop: 'process',
                                    align: 'center',
                                },
                                {
                                    label: '总量',
                                    prop: 'price',
                                    align: 'center',
                                },
                                {
                                    label: '销售',
                                    prop: 'salesRate',
                                    align: 'center',
                                },
                                {
                                    label: '最后期限',
                                    prop: 'endTime',
                                    align: 'center',
                                },
                            ],

                            op: {
                                layout: ['slot-append'],
                            },
                        })
                        .set('layout', [
                            ['refresh-btn', 'flex1', 'search-key'],
                            ['data-table'],
                            ['flex1', 'pagination'],
                        ])
                        .done();
                    app.refresh();
                },

                openForm_CRUD() {
                    this.$refs['cl-form'].open({
                        props: {
                            title: '内嵌CRUD',
                            width: '800px',
                            size: 'mini',
                        },

                        op: {
                            inPage: true,
                            layout: ['cancel', 'confirm']
                        },

                        items: [
                                {
                                    prop: 'vads',
                                    value: [],
                                    label: '动态增减表单验证',
                                    component: {
                                        name: 'slot-validate',
                                    },
                                },
                                {
                                    label: '数字框',
                                    prop: 'a',
                                    component: {
                                        name: 'el-input-number',
                                    },
                                },
                                {
                                    label: '输入框',
                                    prop: 'b',
                                    hidden: false,
                                    component: {
                                        name: 'el-input',
                                        attrs: {
                                            placeholder: '请输入关键字',
                                        },
                                    },
                                },
                                {
                                    label: '下拉选择',
                                    prop: 'c',
                                    value: [1, 2],
                                    component: {
                                        name: 'el-select',
                                        props: {
                                            multiple: true,
                                        },
                                        options: [
                                            {
                                                label: '选项1',
                                                value: 1,
                                            },
                                            {
                                                label: '选项2',
                                                value: 2,
                                            },
                                        ],
                                    },
                                },
                                {
                                    label: '时间',
                                    prop: 'd',
                                    component: {
                                        name: 'el-date-picker',
                                    },
                                },
                                {
                                    label: '多选',
                                    prop: 'e',
                                    value: [1],
                                    component: {
                                        name: 'el-checkbox-group',
                                        options: [
                                            {
                                                label: '选项1',
                                                value: 1,
                                            },
                                            {
                                                label: '选项2',
                                                value: 2,
                                            },
                                        ],
                                    },
                                },
                            ],
                    });
                },

                submit() {
                    this.crud1.submit().then((res) => {
                        console.log(res);
                    });
                },

                getForm() {
                    console.log('表单数据', this.crud1.getForm());
                },

                hiddenItem() {
                    this.crud1.hiddenItem('a');
                },

                addVad(list) {
                    list.push({
                        val: '',
                    });
                },
            },
        });
    </script>
</body>

</html>